<template>
  <div class="form-print-container">
    <!-- 表单信息 -->
    <el-row class="row-style">
      <el-col :span="24"><span class="el-icon-document">表单信息</span></el-col>
      <el-col>
        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
      </el-col>
    </el-row>
    <!-- 审批记录 -->
    <el-row class="row-style">
      <el-col :span="24"><span class="el-icon-document">审批记录</span></el-col>
    </el-row>
    <div class="print-record-container">
      <div v-for="(item, index) in flowRecordList" :key="index">
        <el-descriptions v-if="index > 0" class="margin-top" :title="item.taskName" :column="1" >
          <el-descriptions-item v-if="item.taskName !== '流程结束' && item.taskName !== '已撤回' && item.taskName !== '已终止'">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              审批
            </template>
            {{ item.comment ? item.comment : '审批中' }}
          </el-descriptions-item>
          <el-descriptions-item v-if="item.taskName !== '流程结束' && item.taskName !== '已撤回' && item.taskName !== '已终止'">
            <template slot="label">
              <i class="el-icon-user"></i>
              审批人
            </template>
            {{ item.assigneeDeptName }} {{ item.assigneeName }} {{ item.endTime }}
          </el-descriptions-item>

        </el-descriptions>
      </div>
    </div>
    <el-button  type="success"  v-if="showButton"  @click="myPrint" style="position: fixed; top:80px; right: 50px;">打印</el-button>
  </div>
</template>
<script>
import { taskRecord } from '@/api/flowable/task'
import { getDataByInstId } from '@/api/flowable/front'

export default {
  name: 'instDetail',
  data() {
    return {
      procInstId: this.$route.query.procInstId,
      //表单
      formJson: {},
      formData: {},
      optionData: {},
      flowRecordList: [],
      showButton:true,
    }
  },
  mounted() {
    this.getDataByInstId();
  },
  methods: {
    async getDataByInstId() {
      let res1 = await taskRecord(this.procInstId)
      let info = await getDataByInstId(this.procInstId)
      let formVersion = info.data.formVersion
      let formData = info.data.formData
      this.flowRecordList = res1.data.flowList

      this.$refs.vFormRef.setFormJson(formVersion.formContent)
      this.$nextTick(() => {
        this.$refs.vFormRef.setFormData(JSON.parse(formData.submitData))
        this.$nextTick(() => {
          this.$refs.vFormRef.setReadMode(true)
          // this.$refs.vFormRef.disableForm();
        })
      })
    },
    myPrint(){
      this.showButton = false;
      setTimeout(()=>{
        window.print();
        this.showButton = true;
      }, 300)
    }
  },
  watch: {
    '$route.query.procInstId'(newVal) {
      if (newVal != undefined) {
        this.procInstId = newVal
        this.getDataByInstId()
      }
    }
  }
}
</script>
<style lang="scss">

.form-print-container {

  .el-form-item {
    margin-bottom: 0px;
  }

  .el-col-offset-2 {
    margin-left: 10px;
  }

  width: 100%;
  height: 100%;
  padding-left: 0px;
  .readonly-mode-form .el-form-item__content {
    background-color: #ffffff;
    line-height: 26px;
  }
  .el-form-item--medium .el-form-item__label{
    line-height: 26px;
  }
  .el-upload-list__item:first-child{
    margin-top: 4px;
  }
.el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell{
  padding-bottom: 0px;
}
  // el-descriptions-item el-descriptions-item__cell
  .el-descriptions__header{
    margin-bottom: 5px !important;
  }
  .row-style{
    width: 99%;
  }
  .el-icon-download {
    display: none;
  }
  .el-icon-view {
    display: none;
  }
  .print-record-container {
    padding-left: 50px;
    padding-top: 20px;
    .el-descriptions__header {
      margin-bottom: 10px;
    }
  }
}
</style>
